<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>侧边栏API参考 :: 梅尔沃放置指南</title>
    <meta name="generator" content="Antora 3.1.4">
    <link rel="stylesheet" href="../../../_/css/site.css">
  </head>
  <body class="article">
<header class="header">
  <nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="../../..">梅尔沃放置指南</a>
      <button class="navbar-burger" data-target="topbar-nav">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
    <div id="topbar-nav" class="navbar-menu">
      <div class="navbar-end">
        <a class="navbar-item" href="#">Home</a>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link" href="#">Products</a>
          <div class="navbar-dropdown">
            <a class="navbar-item" href="#">Product A</a>
            <a class="navbar-item" href="#">Product B</a>
            <a class="navbar-item" href="#">Product C</a>
          </div>
        </div>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link" href="#">Services</a>
          <div class="navbar-dropdown">
            <a class="navbar-item" href="#">Service A</a>
            <a class="navbar-item" href="#">Service B</a>
            <a class="navbar-item" href="#">Service C</a>
          </div>
        </div>
        <div class="navbar-item">
          <span class="control">
            <a class="button is-primary" href="#">Download</a>
          </span>
        </div>
      </div>
    </div>
  </nav>
</header>
<div class="body">
<div class="nav-container" data-component="melvor" data-version="1.0.0">
  <aside class="nav">
    <div class="panels">
<div class="nav-panel-menu is-active" data-panel="menu">
  <nav class="nav-menu">
    <h3 class="title"><a href="../index.html">梅尔沃放置</a></h3>
<ul class="nav-list">
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="../战斗/index.html">战斗(no)</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../战斗/攻击.html">攻击(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../战斗/力量.html">力量(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../战斗/防御.html">防御(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../战斗/生命值.html">生命值(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../战斗/远程.html">远程(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../战斗/魔法.html">魔法(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../战斗/祝祭.html">祝祭(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../战斗/屠杀者.html">屠杀者(no)</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">非战斗(ing)</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/伐木.html">伐木(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/钓鱼.html">钓鱼(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/生火.html">生火(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/烹饪.html">烹饪(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/采矿.html">采矿(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/锻造.html">锻造(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/扒窃.html">扒窃(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/弓匠.html">弓匠(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/制造.html">制造(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/符文锻造.html">符文锻造(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/草药学.html">草药学(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/灵巧.html">灵巧(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/召唤.html">召唤(ing)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/星象学.html">星象学(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/生活类魔法.html">生活类魔法(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/制图学.html">制图学(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/考古学.html">考古学(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/农务.html">农务(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../非战斗/城镇.html">城镇(no)</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">练级(no)</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/伐木.html">伐木(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/钓鱼.html">钓鱼(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/生火.html">生火(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/烹饪.html">烹饪(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/采矿.html">采矿(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/锻造.html">锻造(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/扒窃.html">扒窃(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/弓匠.html">弓匠(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/制造.html">制造(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/符文锻造.html">符文锻造(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/草药学.html">草药学(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/灵巧.html">灵巧(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/召唤-练级.html">召唤(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/星象学.html">星象学(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/生活类魔法.html">生活类魔法(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/制图学.html">制图学(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/考古学.html">考古学(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/农务.html">农务(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../练级/城镇.html">城镇(no)</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">其它(no)</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../其它/新手指南.html">新手指南(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../其它/指南.html">指南(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../其它/仓库.html">仓库(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../其它/战斗.html">战斗(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../其它/专精.html">专精(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../其它/赚钱.html">赚钱(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../其它/商店.html">商店(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../其它/菜单.html">菜单(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../其它/宠物.html">宠物(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../其它/哥布林突袭.html">哥布林突袭(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../其它/版本信息.html">版本信息(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../其它/使徒的王座DLC.html">使徒的王座DLC(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../其它/探索地图集DLC.html">探索地图集DLC(no)</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">参考表格(no)</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../参考表格/道具.html">道具(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../参考表格/装备.html">装备(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../参考表格/经验表格.html">经验表格(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../参考表格/道具升级.html">道具升级(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../参考表格/战斗区域.html">战斗区域(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../参考表格/屠杀者区域.html">屠杀者区域(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../参考表格/副本.html">副本(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../参考表格/宝箱战利品表格.html">宝箱战利品表格(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../参考表格/怪物.html">怪物(no)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../参考表格/怪物掉落表格.html">怪物掉落表格(no)</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">指南(ing)</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../指南/战斗-练级.html">战斗-练级(ing)</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../指南/熔岩洞窟-指南.html">熔岩洞窟-指南</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="../指南/冒险模式-指南.html">冒险模式-指南</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="index.html">Mod开发</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="入门指南.html">入门指南</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="创作工具包.html">创作工具包</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="从脚本和扩展迁移.html">从脚本和扩展迁移</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="基础指南.html">基础指南</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="Mod上下文API参考.html">Mod上下文API参考</a>
  </li>
  <li class="nav-item is-current-page" data-depth="2">
    <a class="nav-link" href="侧边栏API参考.html">侧边栏API参考</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="使用PetiteVue创建可复用组件.html">使用PetiteVue创建可复用组件</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="启用Steam客户端的DevTools.html">启用Steam客户端的DevTools</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="游戏内功能参考.html">游戏内功能参考</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <span class="nav-text">工具</span>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <span class="nav-text"><a href="https://consolelog.gitee.io/caniidle/?language=%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87" target="_blank" rel="noopener">我能挂机吗</a></span>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </nav>
</div>
<div class="nav-panel-explore" data-panel="explore">
  <div class="context">
    <span class="title">梅尔沃放置</span>
    <span class="version">1.0.0</span>
  </div>
  <ul class="components">
    <li class="component is-current">
      <a class="title" href="../index.html">梅尔沃放置</a>
      <ul class="versions">
        <li class="version is-current is-latest">
          <a href="../index.html">1.0.0</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
    </div>
  </aside>
</div>
<main class="article">
<div class="toolbar" role="navigation">
<button class="nav-toggle"></button>
  <a href="../index.html" class="home-link"></a>
<nav class="breadcrumbs" aria-label="breadcrumbs">
  <ul>
    <li><a href="../index.html">梅尔沃放置</a></li>
    <li><a href="index.html">Mod开发</a></li>
    <li><a href="侧边栏API参考.html">侧边栏API参考</a></li>
  </ul>
</nav>
<div class="edit-this-page"><a href="file:///D:/src/game/melvor_idle_wiki/melvor/modules/ROOT/pages/mod/侧边栏API参考.adoc">Edit this Page</a></div>
</div>
  <div class="content">
<aside class="toc sidebar" data-title="目录" data-levels="3">
  <div class="toc-menu"></div>
</aside>
<article class="doc">
<h1 class="page">侧边栏API参考</h1>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p><a href="https://wiki.melvoridle.com/w/Mod_Creation/Sidebar_API_Reference" target="_target">原文地址</a></p>
</div>
<div class="paragraph">
<p><code>sidebar</code> 对象是一个全局变量，用于自定义侧边栏（左侧）导航菜单。</p>
</div>
<div class="paragraph">
<p>侧边栏分为四个级别：</p>
</div>
<div class="ulist">
<ul>
<li>
<p><strong>侧边栏</strong>(Sidebar)</p>
<div class="ulist">
<ul>
<li>
<p><strong>类别</strong>(Category)<br>
例如："战斗"(Combat)</p>
<div class="ulist">
<ul>
<li>
<p><strong>项目</strong>(Item)<br>
例如："战斗(Combat)"下的"攻击(Attack)"</p>
<div class="ulist">
<ul>
<li>
<p><strong>子项目</strong>(Subitem)<br>
例如："完成日志(Completion Log)"下的"技能(Skills)"</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_侧边栏sidebar"><a class="anchor" href="#_侧边栏sidebar"></a>1. 侧边栏(Sidebar)</h2>
<div class="sectionbody">
<div class="paragraph">
<p>全局的<code>sidebar</code>对象。</p>
</div>
<div class="sect2">
<h3 id="_categoryid_string_config_categoryconfig_builder_category_category_void_category"><a class="anchor" href="#_categoryid_string_config_categoryconfig_builder_category_category_void_category"></a>1.1. category(id: string, config?: CategoryConfig, builder?: (category: Category) &#8658; void): Category</h3>
<div class="paragraph">
<p><em>或者</em> <code>category(id: string, builder?: (category: Category) &#8658; void): Category</code></p>
</div>
<div class="paragraph">
<p>通过其 <code>ID</code> 获取或创建然后获取类别。</p>
</div>
<div class="paragraph">
<p><strong>参数</strong></p>
</div>
<div class="paragraph">
<p><code>id: string</code> 要获取或创建的类别的 ID。</p>
</div>
<div class="paragraph">
<p><code>config?: CategoryConfig</code> 一个可选的配置对象，可用于配置新的或现有类别。请参见下面的类别配置（CategoryConfig）。</p>
</div>
<div class="paragraph">
<p><code>builder?: (category: Category) &#8658; void</code> 一个可选的回调函数，接收类别作为参数。可用于向类别添加项目，而无需将其存储为变量。</p>
</div>
<div class="paragraph">
<p><strong>返回</strong></p>
</div>
<div class="paragraph">
<p><code>类别(Category)</code>对象。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">// Move COMBAT skills to be below NON-COMBAT
sidebar.category('Combat', { after: 'Non-Combat' });

// Create a new category "GREETINGS" and add an item beneath it
sidebar.category('Greetings', { toggleable: true }, (greetings) =&gt; {
  greetings.item('Hello');
});</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_categories_category"><a class="anchor" href="#_categories_category"></a>1.2. categories(): Category[]</h3>
<div class="paragraph">
<p><strong>返回</strong></p>
</div>
<div class="paragraph">
<p><code>Category[]</code> 所有类别的有序数组。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">const allCategories = sidebar.categories();</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_removecategoryid_string_void"><a class="anchor" href="#_removecategoryid_string_void"></a>1.3. removeCategory(id: string): void</h3>
<div class="paragraph">
<p>通过其 <code>ID</code> 移除一个类别。</p>
</div>
<div class="paragraph">
<p><strong>参数</strong></p>
</div>
<div class="paragraph">
<p><code>id: string</code> 要移除的类别的 ID。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">sidebar.removeCategory('Combat');</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_removeallcategories_void"><a class="anchor" href="#_removeallcategories_void"></a>1.4. removeAllCategories(): void</h3>
<div class="paragraph">
<p>从侧边栏中移除所有类别。尽管不太确定为什么要这样做。</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">sidebar.removeAllCategories();</code></pre>
</div>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_类别category"><a class="anchor" href="#_类别category"></a>2. 类别(Category)</h2>
<div class="sectionbody">
<div class="paragraph">
<p>请参阅侧边栏的 <code>category</code> 方法以了解如何创建类别。</p>
</div>
<div class="sect2">
<h3 id="_类别配置categoryconfig"><a class="anchor" href="#_类别配置categoryconfig"></a>2.1. 类别配置(CategoryConfig)</h3>
<div class="paragraph">
<p>所有属性都是可选的。</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">interface CategoryConfig {
  rootClass?: string | null; // String separated classes to add to the rootEl
  categoryClass?: string | null; // String separated classes to add to the categoryEl
  name?: string | HTMLElement | null; // Override the displayed name (defaults to category id)
  nameClass?: string | null; // String separated classes to add to the nameEl
  toggleable?: boolean | null; // Determines if the category can be hidden (example: Combat &amp; Non-Combat)
  before?: string; // Places the category before another category by id. Cannot be present if after is defined.
  after?: string; // Places the category after another category by id. Cannot be present if before is defined.
  onClick?: (() =&gt; void) | null; // Code to execute if the category title is clicked
  onRender?: (elements: CategoryElements) =&gt; void; // See notes below
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>如果创建一个新的类别，既没有定义 <code>before</code> 也没有定义 <code>after</code>，则该类别将被添加到侧边栏的底部。</p>
</div>
<div class="paragraph">
<p>您可以将任何属性设置为 null 以删除先前配置的选项。例如，将 <code>name</code> 设置为 null 会将类别的显示设置回其 ID。</p>
</div>
<div class="paragraph">
<p><code>onRender</code> 属性可以设置为一个回调函数，该函数在侧边栏渲染后会接收一个包含类别的 HTML 元素属性的对象。这是因为侧边栏可以在渲染之前进行配置，因此类别的 <code>rootEl</code> 属性在渲染之前将是未定义的。<code>elements</code> 参数包含以下内容：</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">interface CategoryElements {
  rootEl: HTMLLIElement;
  categoryEl: HTMLDivElement;
  nameEl: HTMLSpanElement;
  toggleEl?: HTMLElement;
}</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_id_string"><a class="anchor" href="#_id_string"></a>2.2. id: string</h3>
<div class="paragraph">
<p>(属性) 类别的 ID。</p>
</div>
</div>
<div class="sect2">
<h3 id="_rootel_htmllielement"><a class="anchor" href="#_rootel_htmllielement"></a>2.3. rootEl: HTMLLIElement</h3>
<div class="paragraph">
<p>(属性) 类别的根 HTML 元素。包含类别元素（<code>categoryEl</code>）和所有项目元素（item）的根 HTML 元素（<code>rootEl&#8217;s</code>）。</p>
</div>
</div>
<div class="sect2">
<h3 id="_categoryel_htmldivelement"><a class="anchor" href="#_categoryel_htmldivelement"></a>2.4. categoryEl: HTMLDivElement</h3>
<div class="paragraph">
<p>(属性) 类别的主要 HTML 元素。包含名称元素（<code>nameEl</code>）和开关元素（<code>toggleEl</code>），如果已定义。</p>
</div>
</div>
<div class="sect2">
<h3 id="_nameel_htmlspanelement"><a class="anchor" href="#_nameel_htmlspanelement"></a>2.5. nameEl: HTMLSpanElement</h3>
<div class="paragraph">
<p>(属性) 类别的名称 HTML 元素。包含已定义的<code>name</code>属性。</p>
</div>
</div>
<div class="sect2">
<h3 id="_toggleel_htmlelement"><a class="anchor" href="#_toggleel_htmlelement"></a>2.6. toggleEl: HTMLElement</h3>
<div class="paragraph">
<p>(属性) 类别的开关 HTML 元素（可见性图标）。如果类别的 <code>toggleable</code> 属性设置为 <code>false</code> 或 <code>null</code>，则该属性<code>undefined</code>。</p>
</div>
</div>
<div class="sect2">
<h3 id="_click_void"><a class="anchor" href="#_click_void"></a>2.7. click(): void</h3>
<div class="paragraph">
<p>触发类别的已配置 <code>onClick</code> 属性（如果存在）。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">const clickMe = sidebar.category('Click Me', {
  onClick() {
    console.log('I have been clicked!');
  }
});

clickMe.click(); // I have been clicked!</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_toggleforce_boolean_void"><a class="anchor" href="#_toggleforce_boolean_void"></a>2.8. toggle(force?: boolean): void</h3>
<div class="paragraph">
<p>切换类别的可见性。</p>
</div>
<div class="paragraph">
<p><strong>参数</strong></p>
</div>
<div class="paragraph">
<p><code>force?: boolean</code> 可选，设置为 <code>true</code> 以强制显示类别，设置为 <code>false</code> 以隐藏。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">// Show Combat items if currently hidden, or hide if currently being shown
sidebar.category('Combat').toggle();

// Hide Non-Combat items
sidebar.category('Non-Combat').toggle(false);</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_remove_void"><a class="anchor" href="#_remove_void"></a>2.9. remove(): void</h3>
<div class="paragraph">
<p>从侧边栏中移除此类别。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">// Remove Non-Combat skills
sidebar.category('Non-Combat').remove();</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_itemid_string_config_itemconfig_builder_item_item_void_item"><a class="anchor" href="#_itemid_string_config_itemconfig_builder_item_item_void_item"></a>2.10. item(id: string, config?: ItemConfig, builder?: (item: Item) &#8658; void): Item</h3>
<div class="paragraph">
<p><em>或者</em> <code>item(id: string, builder?: (item: Item) &#8658; void): Item</code></p>
</div>
<div class="paragraph">
<p>通过其 <code>ID</code> 获取或创建然后获取项目。</p>
</div>
<div class="paragraph">
<p><strong>参数</strong></p>
</div>
<div class="paragraph">
<p><code>id: string</code> 要获取或创建的项目的 ID。</p>
</div>
<div class="paragraph">
<p><code>config?: 项目配置（ItemConfig）</code> 一个可选的配置对象，可用于配置新的或现有项目。请参见下面的项目配置（ItemConfig）。</p>
</div>
<div class="paragraph">
<p><code>builder?: (item: Item) &#8658; void</code> 一个可选的回调函数，接收项目作为参数。可用于向项目添加子项目，而无需将其存储为变量。</p>
</div>
<div class="paragraph">
<p><strong>返回</strong></p>
</div>
<div class="paragraph">
<p><code>项目（Item）</code>对象。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">// Move Astrology above Firemaking
sidebar.category('Non-Combat').item('melvorD:Astrology', { before: 'melvorD:Firemaking' });

// Create a new item and add a subitem beneath it
sidebar.category('General').item('Greetings', { nameClass: 'text-warning' }, (greetings) =&gt; {
  greetings.subitem('Hello');
});</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_removeitemid_string_void"><a class="anchor" href="#_removeitemid_string_void"></a>2.11. removeItem(id: string): void</h3>
<div class="paragraph">
<p>通过其 <code>ID</code> 从类别中移除一个项目。</p>
</div>
<div class="paragraph">
<p><strong>参数</strong></p>
</div>
<div class="paragraph">
<p><code>id: string</code> 要移除的项目的 ID。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">sidebar.category('Combat').removeItem('melvorD:Attack');</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_removeallitems_void"><a class="anchor" href="#_removeallitems_void"></a>2.12. removeAllItems(): void</h3>
<div class="paragraph">
<p>从类别中移除所有项目。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">sidebar.category('Combat').removeAllItems();</code></pre>
</div>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_项目item"><a class="anchor" href="#_项目item"></a>3. 项目(Item)</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="_项目配置itemconfig"><a class="anchor" href="#_项目配置itemconfig"></a>3.1. 项目配置(ItemConfig)</h3>
<div class="paragraph">
<p>所有属性都是可选的。</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">interface ItemConfig {
  rootClass?: string | null; // String separated classes to add to the rootEl
  itemClass?: string | null; // String separated classes to add to the itemEl
  icon?: string | HTMLElement | null; // Either a URL (string) or an HTMLElement to appear in the item's icon slot.
  iconClass?: string | null; // String separated classes to add to the iconEl
  name?: string | HTMLElement | null; // Override the displayed name (defaults to item id)
  nameClass?: string | null; // String separated classes to add to the nameEl
  aside?: string | HTMLElement | null; // Text or HTMLElement to be displayed in the aside slot. Example: level (1/99) text on skills.
  asideClass?: string | null; // String separated classes to add to the asideEl
  link?: string | null; // URL to open if this item is clicked
  ignoreToggle?: boolean | null; // Set to true if this item should be visible even if its parent category is hidden. Example: Combat Level under the Combat category.
  before?: string; // Places the item before another item by id. Cannot be present if after is defined.
  after?: string; // Places the item after another item by id. Cannot be present if before is defined.
  onClick?: (() =&gt; void) | null; // Code to be executed if the item is clicked
  onRender?: (elements: ItemElements) =&gt; void; // See notes below
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>如果创建一个新项目，既没有定义 <code>before</code> 也没有定义 <code>after</code>，则该项目将被添加到类别的底部。</p>
</div>
<div class="paragraph">
<p>您可以将任何属性设置为 null 以删除先前配置的选项。例如，将 <code>name</code> 设置为 <code>null</code> 会将项目的显示设置回其 ID。</p>
</div>
<div class="paragraph">
<p><code>onRender</code> 属性可以设置为一个回调函数，该函数在侧边栏渲染后会接收一个包含项目的 HTML 元素属性的对象。这是因为侧边栏可以在渲染之前进行配置，因此项目的 HTML 元素属性在渲染之前将是<code>undefined</code>的。<code>elements</code> 参数包含以下内容：</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">interface ItemElements {
  rootEl: HTMLLIElement;
  itemEl: HTMLAnchorElement;
  iconEl: HTMLSpanElement;
  nameEl: HTMLSpanElement;
  asideEl?: HTMLElement;
  subMenuEl?: HTMLUListElement;
}</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_id_string_2"><a class="anchor" href="#_id_string_2"></a>3.2. id: string</h3>
<div class="paragraph">
<p>(属性) 项目的 ID。</p>
</div>
</div>
<div class="sect2">
<h3 id="_rootel_htmllielement_2"><a class="anchor" href="#_rootel_htmllielement_2"></a>3.3. rootEl: HTMLLIElement</h3>
<div class="paragraph">
<p>(属性) 项目的根 HTML 元素。包含<code>itemEl</code>和<code>subMenuEl</code>。</p>
</div>
</div>
<div class="sect2">
<h3 id="_itemel_htmlanchorelement"><a class="anchor" href="#_itemel_htmlanchorelement"></a>3.4. itemEl: HTMLAnchorElement</h3>
<div class="paragraph">
<p>(属性) 项目的主要 HTML 元素。包含<code>iconEl</code>、<code>nameEl</code>和<code>asideEl</code>。</p>
</div>
</div>
<div class="sect2">
<h3 id="_iconel_htmlspanelement"><a class="anchor" href="#_iconel_htmlspanelement"></a>3.5. iconEl: HTMLSpanElement</h3>
<div class="paragraph">
<p>(属性) 项目的图标 HTML 元素。包含已定义的<code>icon</code>属性。</p>
</div>
</div>
<div class="sect2">
<h3 id="_nameel_htmlspanelement_2"><a class="anchor" href="#_nameel_htmlspanelement_2"></a>3.6. nameEl: HTMLSpanElement</h3>
<div class="paragraph">
<p>(属性) 项目的名称 HTML 元素。包含已定义的<code>name</code>属性。</p>
</div>
</div>
<div class="sect2">
<h3 id="_asideel_htmlelement"><a class="anchor" href="#_asideel_htmlelement"></a>3.7. asideEl: HTMLElement</h3>
<div class="paragraph">
<p>(属性) 项目的侧边 HTML 元素。包含已定义的<code>aside</code>属性。如果没有设置<code>aside</code>属性，则该属性<code>undefined</code>。</p>
</div>
</div>
<div class="sect2">
<h3 id="_submenuel_htmlulistelement"><a class="anchor" href="#_submenuel_htmlulistelement"></a>3.8. subMenuEl: HTMLUListElement</h3>
<div class="paragraph">
<p>(属性) 项目的子菜单 HTML 元素。包含任何已定义的子项目。如果没有子项目，则该属性<code>undefined</code>。</p>
</div>
</div>
<div class="sect2">
<h3 id="_category_category"><a class="anchor" href="#_category_category"></a>3.9. category: Category</h3>
<div class="paragraph">
<p>(属性) 项目的父类别。</p>
</div>
</div>
<div class="sect2">
<h3 id="_click_void_2"><a class="anchor" href="#_click_void_2"></a>3.10. click(): void</h3>
<div class="paragraph">
<p>触发项目的已配置 <code>onClick</code> 属性(如果存在)。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">// Navigate to the Woodcutting page
sidebar.category('Non-Combat').item('melvorD:Woodcutting').click();</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_toggleforce_boolean_void_2"><a class="anchor" href="#_toggleforce_boolean_void_2"></a>3.11. toggle(force?: boolean): void</h3>
<div class="paragraph">
<p>切换项目的子项目菜单的可见性，如果存在子项目。</p>
</div>
<div class="paragraph">
<p><strong>参数</strong></p>
</div>
<div class="paragraph">
<p><code>force?: boolean</code> 可选，设置为 <code>true</code> 以强制显示类别，设置为 <code>false</code> 以隐藏。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">// Collapse (hide) the Completion Log's submenu if currently expanded (shown)
// Or expand (show) the submenu if currently collapsed (hidden)
sidebar.category('General').item('Completion Log').toggle();

// Collapse (hide) the Completion Log's submenu
sidebar.category('General').item('Completion Log').toggle(false);</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_remove_void_2"><a class="anchor" href="#_remove_void_2"></a>3.12. remove(): void</h3>
<div class="paragraph">
<p>从父类别中移除此项目。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">// Removes the Summoning skill from the sidebar
sidebar.category('Non-Combat').item('melvorD:Summoning').remove();</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_subitemid_string_config_subitemconfig_builder_subitem_subitem_void_subitem"><a class="anchor" href="#_subitemid_string_config_subitemconfig_builder_subitem_subitem_void_subitem"></a>3.13. subitem(id: string, config?: SubitemConfig, builder?: (subitem: Subitem) &#8658; void): Subitem</h3>
<div class="paragraph">
<p><em>或者</em> <code>subitem(id: string, builder: (subitem: Subitem) &#8658; void): Subitem</code></p>
</div>
<div class="paragraph">
<p>通过其 ID 获取或创建然后获取子项目。</p>
</div>
<div class="paragraph">
<p><strong>参数</strong></p>
</div>
<div class="paragraph">
<p><code>id: string</code> 要获取或创建的子项目的 ID。</p>
</div>
<div class="paragraph">
<p><code>config?: 子项目配置(SubitemConfig)</code> 一个可选的配置对象，可用于配置新的或现有子项目。请参见下面的子项目配置(SubitemConfig)。</p>
</div>
<div class="paragraph">
<p><code>builder?: (subitem: Subitem) &#8658; void</code> 一个可选的回调函数，接收子项目作为参数。</p>
</div>
<div class="paragraph">
<p><strong>返回</strong></p>
</div>
<div class="paragraph">
<p><code>子项目(Subitem)</code>对象。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">// Move Pets above Skills in the Completion Log
sidebar.category('General').item('Completion Log').subitem('Pets', { before: 'Skills' });

// Add a shortcut to Alt. Magic beneath Magic
sidebar.category('Combat').item('melvorD:Magic').subitem('Alt. Magic', {
  onClick() {
    sidebar.category('Non-Combat').item('melvorD:Magic').click();
  }
});</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_removesubitemid_string_void"><a class="anchor" href="#_removesubitemid_string_void"></a>3.14. removeSubitem(id: string): void</h3>
<div class="paragraph">
<p>通过其 <code>ID</code> 从项目中移除一个子项目。</p>
</div>
<div class="paragraph">
<p><strong>参数</strong></p>
</div>
<div class="paragraph">
<p><code>id: string</code> 要移除的子项目的 ID。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">sidebar.category('General').item('Completion Log').removeSubitem('Skills');</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_removeallsubitems_void"><a class="anchor" href="#_removeallsubitems_void"></a>3.15. removeAllSubitems(): void</h3>
<div class="paragraph">
<p>从项目中移除所有子项目。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">sidebar.category('General').item('Completion Log').removeAllSubitems();</code></pre>
</div>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_子项目subitem"><a class="anchor" href="#_子项目subitem"></a>4. 子项目(Subitem)</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="_子项目配置subitemconfig"><a class="anchor" href="#_子项目配置subitemconfig"></a>4.1. 子项目配置(SubitemConfig)</h3>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">interface SubitemConfig {
  rootClass?: string | null; // String separated classes to add to the rootEl
  subitemClass?: string | null; // String separated classes to add to the subitemEl
  name?: string | HTMLElement | null; // Override the displayed name (defaults to subitem id)
  nameClass?: string | null; // String separated classes to add to the nameEl
  aside?: string | HTMLElement | null; // Text or HTMLElement to be displayed in the aside slot. Example: completion percentages in the Completion Log.
  asideClass?: string | null; // String separated classes to add to the asideEl
  link?: string | null; // URL to open if this item is clicked
  before?: string; // Places the subitem before another subitem by id. Cannot be present if after is defined.
  after?: string; // Places the item after another item by id. Cannot be present if before is defined.
  onClick?: (() =&gt; void) | null; // Code to be executed if the subitem is clicked
  onRender?: (elements: SubitemElements) =&gt; void; // See notes below
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>如果创建一个新的子项目，既没有定义 <code>before</code> 也没有定义 <code>after</code>，则子项目将被添加到父项目的子菜单的底部。</p>
</div>
<div class="paragraph">
<p>您可以将任何属性设置为 <code>null</code> 以删除先前配置的选项。例如，将 <code>name</code> 设置为 <code>null</code> 会将子项目的显示设置回其 ID。</p>
</div>
<div class="paragraph">
<p><code>onRender</code> 属性可以设置为一个回调函数，该函数在侧边栏渲染后会接收一个包含子项目的 HTML 元素属性的对象。这是因为侧边栏可以在渲染之前进行配置，因此子项目的 HTML 元素属性在渲染之前将是<code>undefined</code>的。<code>elements</code> 参数包含以下内容：</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">interface SubitemElements {
  rootEl: HTMLLIElement;
  subitemEl: HTMLAnchorElement;
  nameEl: HTMLSpanElement;
  asideEl?: HTMLElement;
}</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_id_string_3"><a class="anchor" href="#_id_string_3"></a>4.2. id: string</h3>
<div class="paragraph">
<p>(属性) 子项目的 ID。</p>
</div>
</div>
<div class="sect2">
<h3 id="_rootel_htmllielement_3"><a class="anchor" href="#_rootel_htmllielement_3"></a>4.3. rootEl: HTMLLIElement</h3>
<div class="paragraph">
<p>(属性) 子项目的根 HTML 元素。包含<code>subitemEl</code>。</p>
</div>
</div>
<div class="sect2">
<h3 id="_subitemel_htmlanchorelement"><a class="anchor" href="#_subitemel_htmlanchorelement"></a>4.4. subitemEl: HTMLAnchorElement</h3>
<div class="paragraph">
<p>(属性) 子项目的主要 HTML 元素。包含<code>nameEl</code>和<code>asideEl</code>。</p>
</div>
</div>
<div class="sect2">
<h3 id="_nameel_htmlspanelement_3"><a class="anchor" href="#_nameel_htmlspanelement_3"></a>4.5. nameEl: HTMLSpanElement</h3>
<div class="paragraph">
<p>(属性) 子项目的名称 HTML 元素。包含已定义的<code>name</code>属性。</p>
</div>
</div>
<div class="sect2">
<h3 id="_asideel_htmlelement_2"><a class="anchor" href="#_asideel_htmlelement_2"></a>4.6. asideEl: HTMLElement</h3>
<div class="paragraph">
<p>(属性) 子项目的侧边 HTML 元素。包含已定义的<code>aside</code>属性。如果未设置<code>aside</code>属性，则该属性<code>undefined</code>。</p>
</div>
</div>
<div class="sect2">
<h3 id="_item_item"><a class="anchor" href="#_item_item"></a>4.7. item: Item</h3>
<div class="paragraph">
<p>(属性) 子项目的父项目。</p>
</div>
</div>
<div class="sect2">
<h3 id="_click_void_3"><a class="anchor" href="#_click_void_3"></a>4.8. click(): void</h3>
<div class="paragraph">
<p>触发子项目的已配置 <code>onClick</code> 属性（如果存在）。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">// Navigate to the Completion Log's Items page
sidebar.category('General').item('Completion Log').subitem('Items').click();</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_remove_void_3"><a class="anchor" href="#_remove_void_3"></a>4.9. remove(): void</h3>
<div class="paragraph">
<p>从父项目中移除此子项目。</p>
</div>
<div class="paragraph">
<p><strong>示例</strong></p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">// Remove Items from the Completion Log sidebar
sidebar.category('General').item('Completion Log').subitem('Items').remove();</code></pre>
</div>
</div>
<table class="tableblock frame-all grid-all fit-content">
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<td class="tableblock halign-center valign-middle" colspan="8"><p class="tableblock"><strong>Mod指南</strong></p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock"><a href="入门指南.html" class="xref page">Mod开发的入门指南</a></p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock"><a href="创作工具包.html" class="xref page">创作工具包</a></p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock"><a href="从脚本和扩展迁移.html" class="xref page">从脚本和扩展迁移</a></p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock"><a href="基础指南.html" class="xref page">基础指南</a></p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock"><a href="Mod上下文API参考.html" class="xref page">Mod上下文API参考</a></p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock"><a href="侧边栏API参考.html" class="xref page">侧边栏API参考</a></p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock"><a href="使用PetiteVue创建可复用组件.html" class="xref page">使用PetiteVue创建可复用组件</a></p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock"><a href="启用Steam客户端的DevTools.html" class="xref page">启用Steam客户端的DevTools</a></p></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</article>
  </div>
</main>
</div>
<script id="site-script" src="../../../_/js/site.js" data-ui-root-path="../../../_"></script>
<script async src="../../../_/js/vendor/highlight.js"></script>

  </body>
</html>
